import { set } from 'mobx';
import React from 'react';
import * as THREE from 'three.js';

class ThreeScene extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            scene: null,
            camera: null,
            renderer: null,
            mesh: null,
            light: null,
            controls: null,
            animate: null,
            clock: null,
            mouse: null,
            raycaster: null,
            mouseDown: false,
            mouseDownTime: 0,
            mouseDownPosition: null,
        }
    }
    componentDidMount() {
               // 创建场景
                let scene = new THREE.Scene();
               // 创建透视相机
               var camera = new THREE.PerspectiveCamera(
                   50,
                   window.innerWidth / window.innerHeight,
                   0.1,
                   1000
               );
               // 设置相机位置
               camera.position.set(5, 10, 10);
               // 创建WebGL渲染器
               var renderer = new THREE.WebGLRenderer();
               // 设置渲染器大小
               renderer.setSize(window.innerWidth, window.innerHeight);
               // 将渲染器的DOM元素添加到挂载点
               this.mount.appendChild(renderer.domElement);
               // 创建立方体几何体
               var geometry = new THREE.BoxGeometry(4, 4, 4);
               // 创建基本材质
               var materialBasic = new THREE.MeshBasicMaterial({
                   color: 0xffffff,
                   wireframe: true
               });
               // 创建法线材质
               var materialNormal = new THREE.MeshNormalMaterial();
               // 创建多材质立方体
               var cube = THREE.SceneUtils.createMultiMaterialObject(geometry, [
                   materialBasic,
                   materialNormal
               ]);
               // 设置相机朝向立方体位置
               camera.lookAt(cube.position);
               // 将立方体添加到场景中
               scene.add(cube);
               // 创建聚光灯
               var spotLight = new THREE.SpotLight(0xffffff);
               // 设置聚光灯位置
               spotLight.position.set(0, 20, 20);
               // 设置聚光灯强度
               spotLight.intensity = 5;
               // 将聚光灯添加到场景中
               scene.add(spotLight);
               // 创建坐标轴
               var axes = new THREE.AxisHelper(6);
               // 将坐标轴添加到场景中
               scene.add(axes);
               // 渲染场景
               renderer.render(scene, camera);
               this.setState({ scene});
               this.setState({ camera});
               this.setState({ cube});
               this.setState({spotLight });
               this.setState({ axes});
               this.setState({ renderer});
               this.animate()
    }
    animate = ()=>{
        setTimeout(()=>{
       requestAnimationFrame(this.animate);
        this.state.cube.rotation.x += 0.01;
        this.state.cube.rotation.y += 0.01;
        // 渲染器结合场景和相机进行渲染
        this.state.renderer.render( this.state.scene,  this.state.camera);
        })
    }
    render(){
       return (
        <>
       <div ref={ref => (this.mount = ref)}></div>
       </>
       )
    }
}
export default ThreeScene;